<template>
  <div class="cart">
    <div>
      <van-nav-bar
          title="购物车"
          left-text="返回"
          left-arrow
          @click-left="toshoptype()" />
<!--          @click-right="toOrder()"-->

      <div v-for="c in shop" :key="c" >
      <van-checkbox-group v-model="checked1" @change="addprices()">
      <van-swipe-cell >
        <van-checkbox :name="c" >
        <van-card
            :num="c.nub"
            :price=" c.discount * c.nub"
            :title=" c.name  "
            class="goods-card"
            :thumb="c.img"
        />
        </van-checkbox>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="del(c.sid,this)"  />
        </template>

      </van-swipe-cell>
    </van-checkbox-group>
      </div>
    </div>
    <div >
      <!--        <van-checkbox @click="checkAll">全选</van-checkbox>-->
      <van-submit-bar :price="prices*100" button-text="立即支付" @click="add()"  @submit="onSubmit"  >
      </van-submit-bar>
    </div>
  </div>
</template>

<script>

export default {
  name: "ShoppingCartView",
  data() {
    return {
      price:"",
      shop :[{
        sid:"",
        mid:"",
        img: "",
        name: "",
        discount:"" ,
        nub:""
      }],
       checked1:[],
      prices:0
    }
  },
  mounted() {
    this.getShopList()
  },
  methods: {
    getShopList(){
      this.axios.get("/api/mallcart/all.do").then(r=>{
        this.shop=r.data.data;

        // this.prices=0
        // for (var s of this.shop) {
        //   this.prices+=s.discount*s.nub;
        // }
      })
    },
    addprices(){
      var p = this.prices
      p=0;
      // this.prices=0
      console.log(this.checked1)
      for (var i=0 ;i < this.checked1.length;i++ ){
        console.log(this.checked1)
        p+=this.checked1[i].nub * this.checked1[i].discount
      }
      console.log(p)
       this.prices=p
    },
    //返回列表页
   toshoptype() {
     this.$router.push("/mall");
    },
    //返回订单页
    // toOrder(){
    //   this.$router.push("/order")
    // },
    setup() {
      const onSubmit = () => Toast();

      return {
        onSubmit,

      };
      // const checked = ref([]);
      // const checkboxGroup = ref(null);
      //
      // const checkAll = () => {
      //   checkboxGroup.value.toggleAll(true);

    },

    del(sid) {
     console.log(sid)
      this.axios.get("/api/mallcart/del.do?sid="+sid).then((res)=>{
        if(res.data.code===200){
          this.$toast("删除成功")
          this.getShopList()
        }else {
          this.$toast("删除失败")
        }
          }).catch(()=>{
        this.$toast("接口错误")
      })
    },
    add(){
      this.axios.get("/api/payvip/createpay.do").then(r=>{
        if(r.data.code=200){
          //创建支付成功
          document.write(r.data.data);
        }
      })
    },
    dianji(){
      console.log(this.checked1)
    }
  }
}
</script>

<style scoped>
.sy-tj-imgs {
  width: 180px;
  height: 100px;
  border-radius: 20px;
  float: left;
}
.sy-tj-hd {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
  height: 140px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
</style>
